// 源插件
import React, { Fragment, PureComponent } from 'react';
import { DateDiff, DateStamp, FormatnumberZero, Mover, NumberDivide } from '@/function.js';

// 视图插件
import { Button, Card, Divider, Form, message, notification, Switch } from 'antd';

// 外部组件
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTablePro from '@/components/UpgradeStandardTable/StandardTablePro';
import { connect } from 'dva';
import AddDQ from './AddDQ';
import ExportJsonExcel from '@/components/XLSXOUT/js-export-excel-custom';
// import UpdateDQ from "./UpdateDQ";

// css OR less预编译器

// 图片
/**
 *  Describe:数据连接
 */

@connect(({ dq, loading }) => ({
  dq,
  loading: loading.models.dqRule,
}))
@Form.create()
class DQ extends PureComponent {
  componentWillMount() {}

  /**
   *  Describe:当前状态
   */

  state = {
    listLoading: false, // 加载状态
    dataSource: {
      data: [],
      total: [],
      code: 0,
    },
    addVisible: false,
    updateVisible: false,
    row: {},
  };

  dataSourceChange() {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'dq/GetDQ',
      callback: res => {
        that.setState({
          dataSource: {
            title: 'DQMonitor',
            code: 1,
            data: res.list,
            total: [],
            columns: [
              // {
              //   title: '类型',
              //   dataIndex: 'type',
              //   type: 'string',
              //   fixed:'left',
              //   width: 70,
              //   filters: [
              //     {
              //       text: 'AQ',
              //       value: "AQ",
              //     },
              //     {
              //       text: 'DQ',
              //       value: "DQ",
              //     },
              //   ],
              // },
              // {
              //   title: '银行',
              //   dataIndex: 'bank',
              //   width: 75,
              //   fixed:'left',
              //   type: 'string',
              //   filters: [
              //     {
              //       text: '瑞银',
              //       value: "瑞银",
              //     },
              //     {
              //       text: '中银',
              //       value: "中银",
              //     },
              //     {
              //       text: '花旗',
              //       value: "花旗",
              //     },
              //   ],
              // },
              {
                title: '股票',
                dataIndex: 'code',
                width: 100,
                type: 'string',
                search: true,
              },
              {
                title: '瑞银股数',
                width: 75,
                dataIndex: 'ubsStockNum',
                type: 'number',
                sorter: true,
              },
              {
                title: '花旗股数',
                width: 75,
                dataIndex: 'cpbStockNum',
                type: 'number',
                sorter: true,
              },
              {
                title: '总股数',
                width: 75,
                dataIndex: 'totalStockNum',
                type: 'number',
                sorter: true,
              },
              {
                title: 'AQ 1倍敞口',
                dataIndex: 'aqStockNum',
                type: 'number',
                sorter: true,
              },
              {
                title: 'Sell Put',
                dataIndex: 'spStockNumStr',
                type: 'string',
              },
              {
                title: 'Sell Call',
                dataIndex: 'scStockNum',
                type: 'number',
                sorter: true,
              },
              {
                title: 'Buy Call',
                dataIndex: 'bcStockNum',
                type: 'number',
                sorter: true,
              },
              {
                title: '可用',
                dataIndex: 'usefulStockNum',
                type: 'number',
                sorter: true,
              },

              {
                title: 'DQ 2倍敞口',
                dataIndex: 'dqStockNum2Multiple',
                type: 'number',
                sorter: true,
              },
              {
                title: '剩余',
                dataIndex: 'restStockNum',
                type: 'number',
                sorter: true,
              },
              {
                title: '剩余市值',
                dataIndex: 'restStockMarketValue',
                type: 'number',
                sorter: true,
              },
              {
                title: '成本价',
                dataIndex: 'costPrice',
                type: 'number',
                sorter: true,
              },

              {
                title: '现价',
                dataIndex: 'nowPrice',
                type: 'number',
                sorter: true,
              },
              {
                title: '盈亏幅度',
                dataIndex: 'profitRate',
                type: 'number',
                sorter: true,
                render: (value, row, index) => {
                  return <div>{NumberDivide(mathService.mul(value, 100), 2, '%')}</div>;
                },
              },
              // {
              //   title: '盈亏',
              //   dataIndex: 'profitValue',
              //   type: 'number',
              //   sorter: true,
              //   render: (value, row, index) => {
              //     return <div>{NumberDivide(value, 2)}</div>;
              //   },
              // },

              {
                title: '操作',
                render: (text, record) => {
                  if (record.type === '合计') {
                    return null;
                  }
                  return (
                    <Fragment>
                      <a onClick={() => this.deleteThis(record)}>删除</a>
                    </Fragment>
                  );
                },
              },
            ],
          },
        });
      },
    });
  }

  openAddVisible() {
    this.setState({
      addVisible: true,
    });
  }

  closeAddVisbile() {
    const that = this;
    this.setState(
      {
        addVisible: false,
      },
      () => {
        that.dataSourceChange();
      }
    );
  }

  openUpdateVisible(row) {
    this.setState({
      row,
      updateVisible: true,
    });
  }

  closeUpdateVisbile() {
    const that = this;
    this.setState(
      {
        updateVisible: false,
      },
      () => {
        that.dataSourceChange();
      }
    );
  }

  deleteThis(row) {
    const that = this;
    const { dispatch } = this.props;
    dispatch({
      type: 'dq/DelDQ',
      payload: { id: row.id },
      callback: res => {
        that.dataSourceChange();
      },
    });
  }

  refreshControl = (checked, ev) => {
    const that = this;
    // console.log(checked, 'checked')
    // this.setState({ autoRefrsh: checked })
    if (checked) {
      window.interval4 = setInterval(() => {
        message.success('DQMonitor刷新');
        that.dataSourceChange();
      }, 50000);
    } else {
      clearInterval(window.interval4);
    }
  };

  outXlsx() {
    const { dataSource } = this.state; // 表格数据
    const dataInfos = dataSource.data; // 表格数据
    const option = {};
    const infosTable = [];
    if (dataInfos) {
      for (const i in dataInfos) {
        if (dataInfos) {
          const obj = {
            股票: dataInfos[i].code,
            瑞银股数: dataInfos[i].ubsStockNum,
            花旗股数: dataInfos[i].cpbStockNum,
            总股数: dataInfos[i].totalStockNum,
            'AQ 1倍敞口': dataInfos[i].aqStockNum,
            'Sell Put': dataInfos[i].spStockNumStr,
            'DQ 2倍敞口': dataInfos[i].dqStockNum2Multiple,
            剩余: dataInfos[i].restStockNum,
            剩余市值: dataInfos[i].restStockMarketValue,
            现价: dataInfos[i].nowPrice,
            盈亏幅度: NumberDivide(mathService.mul(dataInfos[i].profitRate, 100), 2, '%'),
            // 盈亏: NumberDivide(dataInfos[i].profitValue, 2),
            'Sell Call': dataInfos[i].scStockNum,
            'Buy Call': dataInfos[i].bcStockNum,
            可用: dataInfos[i].usefulStockNum,
            成本价: dataInfos[i].costPrice,
          };
          infosTable.push(obj);
        }
      }
    }
    option.fileName = 'DQMonitor';
    option.datas = [
      {
        sheetData: infosTable,
        sheetName: 'DQMonitor',
        sheetFilter: [
          '股票',
          '瑞银股数',
          '花旗股数',
          '总股数',
          'AQ 1倍敞口',
          'Sell Put',
          'Sell Call',
          'Buy Call',
          '可用',
          'DQ 2倍敞口',
          '剩余',
          '剩余市值',
          '成本价',
          '现价',
          '盈亏幅度',
          // '盈亏',
        ],
        sheetHeader: [
          '股票',
          '瑞银股数',
          '花旗股数',
          '总股数',
          'AQ 1倍敞口',
          'Sell Put',
          'Sell Call',
          'Buy Call',
          '可用',
          'DQ 2倍敞口',
          '剩余',
          '剩余市值',
          '成本价',
          '现价',
          '盈亏幅度',
          // '盈亏',
        ],
        columnWidths: [
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          // { wpx: 100 },
        ],
      },
    ];

    const toExcel = new ExportJsonExcel(option);
    toExcel.saveExcel();
  }

  render() {
    const { addVisible, updateVisible, row, dataSource } = this.state;
    return (
      <PageHeaderWrapper>
        <Card>
          <div style={{ display: 'flex', alignItems: 'center', marginRight: '30px' }}>
            <div style={{ marginRight: '10px' }}>自动刷新</div>
            <Switch
              checkedChildren="开"
              unCheckedChildren="关"
              onChange={this.refreshControl.bind(this)}
            />
          </div>
          <br />
          <Button onClick={this.openAddVisible.bind(this)} style={{ marginRight: 25 }}>
            添加
          </Button>
          <Button type="primary" onClick={this.outXlsx.bind(this)}>
            导出XLSX
          </Button>
          <br />
          <br />
          <StandardTablePro dataSource={dataSource} />
          <AddDQ closeVisbile={this.closeAddVisbile.bind(this)} visible={addVisible} />

          {/* <UpdateDQ */}
          {/* closeVisbile={this.closeUpdateVisbile.bind(this)} */}
          {/* visible={updateVisible} */}
          {/* row={row} */}
          {/* /> */}
        </Card>
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    const that = this;
    this.dataSourceChange();
  }

  componentWillUnmount() {}
}

export default DQ;
